<script setup>
import { ref } from "vue";
import pinia from "../../store";
import { pageStore } from "../../store/ChatPage";
import { storeToRefs } from "pinia";

const chatpage = pageStore(pinia);
const { mode } = storeToRefs(chatpage);

const radio = ref("1");

const tagChange1 = () => {
    radio.value = '1';
    mode.value = 'Chat';
};
const tagChange2 = () => {
    radio.value = '2';
    mode.value = 'ChatGPT4';
};
</script>

<template>
    <div class="ModelChoiceBox">
        <el-check-tag class="modelchoice_radiobtn" :checked="radio === '1'"
            @change="tagChange1">gpt-3.5-turbo</el-check-tag>
        <el-check-tag class="modelchoice_radiobtn" :checked="radio === '2'"
            @change="tagChange2">gpt-4-1106-preview</el-check-tag>
    </div>
</template>

<style scoped>
.ModelChoiceBox {
    width: fit-content;
    height: max-content;
    max-width: 90%;
    background-color: black;
    border-radius: 10px;
    box-shadow: 1px 1px 10px 1px black;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.modelchoice_radiobtn {
    margin: 5px;
    background-color: black !important;
}

.modelchoice_radiobtn.is-checked {
    background-color: var(--left-black) !important;
    color: var(--right-yellow) !important;
}

.modelchoice_radiobtn:hover {
    background-color: var(--left-black) !important;
}
</style>